<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="big-box">
    <div class="box">
      <div class="header">
        <p style="padding: 10px;margin: 0px"><b>消息中心，</b>为您展示了当前已完成相关业务待正常结清的合同信息，
          业务进展反馈、风险预警信息等内容，会实时推送到您的消息中心，您也可以在这里查看系统发送的历史信息
        </p>
        <ul class="btn">
          <li v-for="(item,index) in options" :key="index"
              :class="{white:num == index}" @click="change(index,item)"
          >{{item.messageTypeName}}
          </li>
        </ul>
      </div>
      <div class="content">
        <div class="paging">
          <div class="paging-img" @click="changeStatusBatch">
            <img src="../../assets/Mark@2x.png"/>
          </div>
          <div class="paging-btn">
            <div class="all">合计:{{totalRowNum}} <span>{{paging}}</span>/{{page}}页</div>
            <div class="device">
              <span @click="sub" ref="sub" class="gray"><span class="jian"></span></span>
              <span @click="add" ref="add" class="gray"><span class="tou"></span></span>
            </div>
          </div>
        </div>
        <div>
          <div class="content-left">
            <ul class="section" v-loading="loading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading">
              <li v-for="(itemCon,index) in listData" :key="index" :class="{pink:con == index}" @click="listCon(index,itemCon)">
                <p  style="color: #3A3A3A;font-family: PingFangSC-Medium" v-if="itemCon.messageStatus=='UNREAD'">
                  {{contentFunction(itemCon.messageContent,itemCon.messageTitle)}}
                </p>
                <p style=" color: #52504D ;font-family: PingFangSC-Regular" v-else>
                  {{contentFunction(itemCon.messageContent,itemCon.messageTitle)}}
                </p>
                <span class="time">{{timeFunction(itemCon.creationTs)}}</span>
              </li>
            </ul>
          </div>
          <div class="content-right" v-loading="loading" element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading">
            <div class="text" v-for="(itemList,index) in listData" :key="index" v-show="index === con">
              <p class="title">{{itemList.messageTitle}}</p>
              <hr style=" height:2px;border:none;border-top:1px solid #CFCFCF;"/>
              <p class="time">
                {{timeFunction(itemList.creationTs)}}
              </p>
              <p class="introduce">{{itemList.messageContent}}</p>
              <p class="where" @click="messageClick(itemList)">{{itemList.linkName}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MessageCenter",
    data() {
      return {
        loading: true,
        options: [],
        num: 0,
        con: 0,
        paging: 1,
        page: 1,
        pageSize: 6,
        totalRowNum: 0,
        messageTypeId: null,
        listData: [],
        serviceName: 'joys-admin',
        typeName: 'messageType'
      }
    },
    mounted() {
      this.load()
      this.loadListData()
    },
    methods: {
      load() {
        this.options = []
        const url = '/joys-rest/joys-admin/messageType/list'
        this.$http.get(url).then(resp => {
          this.options = resp.body || []
          this.options.unshift({messageTypeId: "All", messageTypeName: "全部"})
        }, resp => {
          this.$message.error(resp.data)
        })
      },
      loadListData() {
        this.listData = []
        this.loading = true
        this.$http.get('/joys-rest/joys-admin/message/page', {
          params: {
            messageStatus: null,
            messageTypeId: this.messageTypeId,
            messageContent: null,
            pageIndex: this.paging,
            pageSize: this.pageSize
          }
        }).then(resp => {
          this.loading = false
          this.listData = resp.data.rows
          this.totalRowNum = resp.data.total
          this.page = Math.ceil(this.totalRowNum / 6)
          if (this.page > this.paging) {
            this.$refs.add.style.background = "#001616";
          } else {
            this.$refs.add.style.background = "rgba(0,0,0,.2)";
          }
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      change(index, item) {
        this.num = index;
        if (index == 0) {
          this.messageTypeId = null
        } else {
          this.messageTypeId = item.messageTypeId
        }
        this.paging = 1
        this.$refs.sub.style.background = "rgba(0,0,0,.2)";
        this.loadListData()

      },
      listCon(index,value) {
        this.con = index;
        if (value.messageStatus == 'UNREAD') {
          value.messageStatus = 'READ'
          this.changeStatus(value)
        }

      },
      // 更新消息状态-已读
      changeStatus(value){
        const url = '/joys-rest/joys-admin/message/saveMessage'
        this.$http.put(url, value).then(resp => {
          value = resp.data
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      // 全部已读
      changeStatusBatch(){
        for (let i = 0; i < this.listData.length; i++) {
          this.listData[i].messageStatus = 'READ'
        }
        var messageTypeId = this.messageTypeId
        if (this.messageTypeId === 'ALL') {
          messageTypeId = null
        }
        const url = '/joys-rest/joys-admin/message/status'
        this.$http.put(url,{
          params: {
            messageTypeId: messageTypeId,
          }
        }).then(resp => {
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      // 加页，即下一页
      add() {
        if (this.paging < this.page) {
          this.paging++;
          if (this.paging >= this.page) {
            this.$refs.add.style.background = "rgba(0,0,0,.2)";
            this.paging = this.page;
          } else {
            console.log(this.paging)
          }
          if (this.paging != 1) {
            this.loadListData()
            this.$refs.sub.style.background = "#001616";

          }
        }
      },
      // 减页，即上一页
      sub() {
        if (this.paging > 1) {
          this.paging--;
          if (this.paging <= 1) {
            this.$refs.sub.style.background = "rgba(0,0,0,.2)";
            this.paging = 1;
          }
          if (this.paging > 1) {
            this.$refs.add.style.background = "#001616 ";
          }
          this.loadListData()
        }

      },
      contentFunction(cellValue, title) {
        if (cellValue) {
          if (cellValue.length > 20) {
            return title + '，' + cellValue.substring(0, 20) + '... ...'
          } else {
            return title + '，' + cellValue + '... ...'
          }
        }
      },
      // 时间戳格式转化
      timeFunction(cellValue) {
        if (cellValue) {
          // 接收时间
          var date = new Date(cellValue) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + '/'
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
          var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
          var h = ' ' + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
          var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
          var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          return Y + M + D + h + m + s
        }
      },
      messageClick(item) {
        console.log(item)
        // window.parent.postMessage(item, '*');
        this.$bus.sendMessage('OPEN_APPLET', item)
      }
    }
  }
</script>

<style scoped>
  .big-box {
    padding: 0 24px 0 0;
    box-sizing: border-box;
  }

  .box {
    width: 100%;
    height: 800px;
    background: #fff;
  }

  .header {
    width: 100%;
    height: 96px;
    background: #E4E8EB;
    position: relative;
  }

  .header p {
    padding: 20px 483px 59px 20px;
    font-size: 12px;
    color: #555555;
    box-sizing: border-box;
  }

  .btn {
    width: 500px;
    color: #3A3F4E;
    font-size: 13px;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 27px;
  }

  .btn li {
    width: 80px;
    height: 34px;
    background: #D8DCDF;
    line-height: 34px;
    text-align: center;
    margin-right: 12px;
    border-radius: 2px;
    font-size: 13px;
    color: #3A3F4E;
    cursor: pointer;
  }

  .btn li:first-child {
    width: 65px;
    height: 34px;
  }

  .white {
    background: #fff !important;
  }

  .pink {
    background: #F2F2F2;
    border-right: none !important;
  }

  .content {
    width: 100%;
    height: 655px;
    margin-top: 24px;

  }

  .content-left {
    width: 320px;
    height: 655px;
    float: left;
    box-sizing: border-box;
    padding-left: 12px;
  }

  .paging {
    width: 306px;
    height: 28px;
  }

  .paging-img {
    width: 78px;
    height: 28px;
    float: left;
  }

  .paging-img img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .paging-btn {
    width: 166px;
    height: 28px;
    float: right;
  }

  .all {
    float: left;
    font-size: 12px;
    line-height: 28px;
    color: #555555;
  }

  .device {
    float: right;
    width: 68px;
    height: 28px;
  }

  .device span {
    display: inline-block;
    width: 28px;
    height: 28px;
    /* background:pink; */
    text-align: center;
    line-height: 28px;
    color: #fff;
    border-radius: 1.5px;
  }

  .device span .jian {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    transform: rotate(45deg);
    border-top: none;
    border-right: none;
    margin-top: 8.3px;
    margin-left: 8px;
    border-radius: 1.5px;
  }

  .device span .tou {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    transform: rotate(45deg);
    border-bottom: none;
    border-left: none;
    margin-top: 8.3px;
    margin-right: 8px;
    border-radius: 1.5px;
  }

  .black {
    background: #001616;
  }

  .gray {
    cursor: pointer;
    background: rgba(0, 0, 0, .2);
  }

  .device span:first-child {
    margin-right: 7px;
  }

  .section {
    margin-top: 10px;
    margin-left: -13px;
    height: 627px;
    overflow-y: scroll;
  }

  .section::-webkit-scrollbar {
    /* 隐藏滚动条 */
    display: none;
  }

  .section li {
    width: 307px;
    height: 96px;
    border-bottom: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    box-sizing: border-box;
    padding: 33px 23px 32px 12px;
    cursor: pointer;
  }

  .section li p {
    font-size: 13px;
    color: #52504D;
  }

  .message-center-status{
    color: red;
    font-size: 10px;
  }
  .time {
    color: #868686;
    font-size: 10px;

  }

  .content-right {
    width: 820px;
    height: 652px;
    float: left;
    padding: 40px 120px 434px 40px;
    box-sizing: border-box;
  }

  .text {
    width: 660px;
    height: 187px;
  }

  .title {
    width: 660px;
    font-size: 16px;
    color: #52504D;
    margin-bottom: 5px;
  }

  .text .time {
    margin-top: 24px;
  }

  .introduce {
    font-size: 16px;
    color: #5C5C5C;
    margin-top: 32px;
  }

  .introduce span {
    color: #0062DE;
  }

  .where {
    font-size: 13px;
    color: #0062DE;
    margin-top: 24px;
    cursor: pointer;
  }
</style>
